<template>
  <div class="detailcon">
    <div class="con-header">
      <div class="title">{{articleData.title}}</div>
      <div class="con-header-mes">
          <span style="margin-right:10px">攻略：{{createDate}}</span>
          <span>阅读：{{articleData.watch}}</span>
      </div>
    </div>
    <div class="det-container" v-html="articleData.content">

    </div>
    <el-row class="comAndShare" type="flex">
        <el-row justify="center">
          <el-col><i class="el-icon-edit"></i></el-col>
          <el-col>评论({{articleData.comments.length}})</el-col>
        </el-row>
        <el-row  justify="center" >
          <el-col><i class="el-icon-share"> </i></el-col>
          <el-col>分享</el-col>
        </el-row>
    </el-row>
    <div class="det-comment">
        <comment :commentData="commentData" />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import comment from '../../components/post/detailscomment'
export default {
  name: '',
  components: {
    comment
  },
  data () {
    return {
      articleData: {
        comments: []
      },
      createDate: '',
      commentData: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.$http.get('/posts', {
        params: {
          id: this.$route.query.id
        }
      }).then(res => {
        const [data] = res.data.data
        this.articleData = data
        const day = moment(this.articleData.created_at).format('YYYY-MM-DD HH:mm')
        this.createDate = day
        this.commentData = this.articleData.comments
      })
    }
  },
  watch: {
    $route (val) {
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
.detailcon{
    width: 700px;
    padding-top: 10px;
    .con-header{
        padding: 10px 0;
        .title{
            font-size: 29px;
            font-weight: bold;
            letter-spacing: 1px;
        }
        .con-header-mes{
            font-size: 15px;
            text-align: right;
            color: gray;
            font-weight:normal;
         &::before{
            content: '';
            display: block;
            height: 1px;
            width: 100%;
            background-color: #eee;
            margin: 15px 0;
          }
        }
    }
    .det-container{
        font-size: 15px;
         width: 700px;
        /deep/p{
            span{
                img{
                  max-width: 100%;
                }
            }
            img{
               max-width: 100%;
            }
        }
    }
    .comAndShare{
        padding: 25px;
        width: 30%;
        margin: 0 auto;
        text-align: center;
        .el-col{
          font-size: 15px;
          color: gray;
          i{
            font-size: 35px;
            color: orange;
          }
        }
    }
}
</style>
